<template>
    <div>
		<div v-if="is_show" v-cloak>
			<div class="stateBox">
				<div class="left">
					<img src="../../../assets/index/phb_dq.png" alt="">
				</div>
				<div class="right">
					<img src="../../../assets/index/renwu_dr.png" alt="">
				</div>
			</div>
			<div class="partBox">
				<div class="partInfo">
					<div class="partText aui-ftn12 aui-text-6">
						会员每完成一单<span style="color: #ff2d31">免费试用</span>计入榜单，每月最后一天24点截止统计，1号发放上月奖励，前10名奖励如下:
					</div>
					<div class="partItem">
                        <div :class="[index < 3 ? 'partBlue': '', 'partIn']" v-for="(item, index) in oData.order_reward" :key="index" v-cloak>
							第{{index+1}}名：{{item}}元
						</div>
					</div>
				</div>
			</div>
			<div class="partTwo">
                <div :class="[index < 3 ? 'listBlue': '', 'listBox']" v-for="(item, index) in oData.order_rank" :key="index">
					<div class="list-cont">
						<div class="randimg">
							<img :src="require('../../../assets/index/phb_'+index+'.png')" alt="" v-if="index < 3">
							<span class="num numBlue" v-else>NO.{{index+1}}</span>
						</div>
						<div class="mid">
							<img :src="item.avatar" alt="">
							<div class="txt text-3 aui-ftn13" v-text="item.mobile"></div>
						</div>
						<div class="rt aui-ftn12">
							<span>做单:{{item.count}}单</span>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</template>
<script>
import phb from '../../../service/phb.js'
export default {
    name: 'Award',
	props: {
		show: true
	},
    watch: {
        show (newVal, oldVal) {
            this.is_show = newVal
        }
    },
    data () {
		return {
			is_show: true,
            oData: {}
		}
	},
	mounted() {
		this.is_show = this.show;
        this.fnGetData()
	},
    methods: {
        fnGetData() {
			phb.fnGetRank({}).then(res => {
				if (res && res.status) {
					this.oData = res
				}
			})
		}
    }
}
</script>